<template>
  <view class="u-skeleton" :data-theme="globPrimary">
    <u-navbar
      :title="paperTitle"
      immersive
      :border-bottom="false"
      back-icon-color="#ffffff"
      title-color="#ffffff"
      :background="navbarBackgroundColor"
    ></u-navbar>
    <view class="record-header" :style="[headerBgColorStyle]">
      <view
        :style="{
          width: '100%',
          height: globNavbarHeight + globStatusBarHeight + 'px',
        }"
      ></view>
      <view class="u-skeleton-circle">
        <u-circle-progress
          bg-color="transparent"
          :inactive-color="progressInactiveColor"
          active-color="#ffffff"
          :percent="percentage"
        >
          <view class="progress-content">
            <view class="u-flex u-col-bottom">
              <view class="number">{{ recordData.user_score }}</view>
              <view class="fen">分</view>
            </view>
            <text class="total"> 总分{{ recordData.paper_score }}分 </text>
          </view>
        </u-circle-progress>
      </view>
      <view class="u-flex take u-skeleton-rect">
        <view class="label">用时</view>
        <view class="text">{{ formatTime(recordData.time_takes) }}</view>
      </view>
      <view class="u-flex commit u-skeleton-rect">
        <view class="label">交卷时间</view>
        <view class="text">{{ recordData.commit_time | date('yyyy-mm-dd hh:MM') }}</view>
      </view>
      <view class="info u-skeleton-rect" v-if="recordData.answer_status !== 2"
        >*该试卷含有主观题，请等待阅卷完成</view
      >
    </view>

    <view class="record-body">
      <view class="sheet-header u-flex">
        <view class="title">注：</view>
        <view class="item correct"></view>
        <view class="text">正确</view>
        <view class="item error"></view>
        <view class="text">错误</view>
        <view class="item default"></view>
        <view class="text">未作答</view>
        <view class="item ban"></view>
        <view class="text">主观题</view>
      </view>
      <view class="sheet-list" v-for="(parts, number) in examRecoedList" :key="parts.id">
        <view class="title">{{ parts.title }}</view>
        <view class="list u-flex">
          <view
            class="item"
            :class="[currentTopicColor(item)]"
            v-for="(item, index) in parts.value"
            :key="item.topic_id"
            @click="clickExamParsing(1, item.topic_id)"
          >
            {{ currentTopicIndex(item.topic_id) }}
          </view>
        </view>
      </view>
    </view>

    <view class="record-bottom">
      <view class="record-btn u-flex">
        <button class="btn u-fix-ios-appearance text" @click="clickExamError">错题重练</button>
        <button class="btn u-fix-ios-appearance plain" @click="clickExamParsing(1)">
          全部解析
        </button>
        <button class="btn u-fix-ios-appearance primary" @click="clickExamParsing(0)">
          错题解析
        </button>
      </view>
      <view class="record-btn-placeholder"></view>
    </view>
    <u-skeleton
      :loading="loading"
      :el-color="progressInactiveColor"
      bg-color="transparent"
      border-radius="28"
    ></u-skeleton>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { lighten } from '@/utils'
// 合并数组
const sumTopic = function (arr) {
  return arr.reduce((pre, cur) => pre.concat(cur.value), [])
}
export default {
  data() {
    return {
      navbarBackgroundColor: {
        backgroundColor: 'transparent',
      },
      loading: false,
      paperTitle: '',
      recordData: {},
      examRecoedList: [],
      examName: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',

      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    progressInactiveColor() {
      return lighten(this.globPrimaryColor, 25)
    },
    headerBgColorStyle() {
      let color = this.globPrimaryColor
      return {
        background: `linear-gradient(360deg, ${color} 0%, ${lighten(color, 20.5)} 100%)`,
      }
    },
    percentage() {
      if (this.$u.test.empty(this.recordData)) return 0
      let num = Math.floor((this.recordData.user_score / this.recordData.paper_score) * 100)
      return num < 0 ? 0 : num > 100 ? 100 : num
    },
  },
  onPageScroll(e) {
    this.pageScroll(e)
  },
  onLoad(option) {
    this.examName = option.name
    this.getExamTopic(option.id)
  },
  methods: {
    // 导航栏渐变
    pageScroll(e) {
      let color = this.globPrimaryColor
      let opacity = 0
      let tmpY = 200
      if (e.scrollTop > tmpY) {
        opacity = 1
      } else {
        opacity = (e.scrollTop - 120) / 60
      }
      let rgba = this.$u.colorToRgba(this.globPrimaryColor, opacity)
      this.navbarBackgroundColor = { backgroundColor: rgba }
    },
    // 获取试题
    getExamTopic(id) {
      this.loading = true
      this.$edu.api
        .getExamRecoed({
          record_id: id,
        })
        .then((res) => {
          const { data } = res
          this.recordData = data
          this.paperTitle = data.paper_title
          this.examRecoedList = data.paper_parts
          this.loading = false
        })
    },
    currentTopicColor(item) {
      // correct正确 error错误 ban主观题
      if (item.subjective == 1) return 'ban'
      if (item.answered == 1) return item.answer_right == 1 ? 'correct' : 'error'
      return ''
    },
    // 试题的号
    currentTopicIndex(id) {
      let list = sumTopic(this.examRecoedList)
      let num = list.findIndex((item) => item.topic_id == id)
      return num + 1
    },
    // 解析
    clickExamParsing(type, topic_id) {
      this.$u.route('pageFound/exam/record/parsing', {
        id: this.recordData.id,
        type: type,
        name: this.examName,
        topic_id: topic_id || 0,
      })
    },
    // 错题
    clickExamError() {
      this.$u.route('pageFound/exam/record/topic', {
        id: this.recordData.id,
      })
    },
    // 格式化时间
    formatTime(seconds) {
      let [day, hour, minute, second] = [0, 0, 0, 0]
      day = Math.floor(seconds / (60 * 60 * 24))
      // 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
      // hour为给后面计算秒和分等用的(基于显示天的前提下计算)
      hour = Math.floor(seconds / (60 * 60)) - day * 24
      // showHour为需要显示的小时
      let showHour = null
      if (this.showDays) {
        showHour = hour
      } else {
        // 如果不显示天数，将“天”部分的时间折算到小时中去
        showHour = Math.floor(seconds / (60 * 60))
      }
      minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60
      second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
      // 如果小于10，在前面补上一个"0"
      showHour = showHour < 10 ? '0' + showHour : showHour
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      day = day < 10 ? '0' + day : day
      return showHour + ':' + minute + ':' + second
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.record-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 108rpx;
  .progress-content {
    text-align: center;
    .number {
      font-size: 52rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 1;
    }
    .fen {
      font-size: 30rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 1.4;
    }
    .total {
      font-size: 24rpx;
      color: #ffffff;
    }
  }
  .label {
    font-size: 24rpx;
    color: #ffffff;
    margin-right: 22rpx;
    width: 200rpx;
    text-align: right;
  }
  .text {
    font-size: 24rpx;
    color: #ffffff;
    width: 300rpx;
  }
  .info {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.7);
  }
  .take {
    margin-top: 24rpx;
  }
  .commit {
    margin-top: 16rpx;
  }
}
.record-body {
  background: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 45rpx 0;
  margin-top: -98rpx;
  .sheet-header {
    padding: 0 30rpx;
    .title {
      font-size: 26rpx;
      font-weight: 400;
      color: #909399;
    }
    .item {
      width: 28rpx;
      height: 28rpx;
      border-radius: 4rpx;
      border-width: 1rpx;
      border-style: solid;
      margin-right: 10rpx;
    }
    .correct {
      border-color: #67c23a;
    }
    .error {
      border-color: #f54030;
    }
    .default {
      border-color: #dcdfe6;
    }
    .ban {
      border-color: #dcdfe6;
      background-color: #f0f0f2;
    }
    .text {
      font-size: 26rpx;
      color: #303133;
      margin-right: 32rpx;
    }
  }
  .sheet-list {
    margin-top: 40rpx;
    .title {
      font-size: 28rpx;
      color: #303133;
      padding: 0 30rpx;
    }
    .list {
      flex-wrap: wrap;
      padding-left: 30rpx;
      .item {
        width: 72rpx;
        height: 72rpx;
        color: #303133;
        font-size: 28rpx;
        border-radius: 8rpx;
        border-width: 1rpx;
        border-style: solid;
        border-color: #dcdfe6;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
        margin-right: 30rpx;
        &.correct {
          color: #67c23a;
          border-color: #67c23a;
        }
        &.error {
          color: #f54030;
          border-color: #f54030;
        }
        &.ban {
          border-color: #dcdfe6;
          background-color: #f0f0f2;
        }
      }
    }
  }
}
.record-bottom {
  .record-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 980;
    .btn {
      flex: 1;
      width: 136px;
      height: 98rpx;
      font-size: 32rpx;
      line-height: 98rpx;
      text-align: center;
      border: none;
      border-radius: 0;
      background-color: #ffffff;
    }
    .text {
      @include text-color;
    }
    .plain {
      @include text-color;
      @include bg-color-disabled;
    }
    .primary {
      color: #ffffff;
      @include bg-color;
    }
    ::v-deep button:after {
      border: none;
      border-radius: 0;
    }
  }
  .record-btn-placeholder {
    width: 100%;
    height: 98rpx;
  }
}
</style>
